<template>
	<view class="home-action">
		<!-- 背景图片 -->
		<image class="image-bg" :src="backgroundUrl" mode="widthFix"></image>
		<view class="box-content">
			<view class="ca-content">
				<view class="one">
					<view class="two" v-for="(res, index) in boxListOne" :key="index">
						<image :ref="'gitOne' + res.id" class="present" :src="res.imgUrl"
							@tap="selectBox(1, res.id, index)">
					</view>
				</view>
				<view class="one">
					<view class="two" v-for="(res, index) in boxListTwo" :key="index">
						<image :ref="'gitTwo' + res.id" class="present" :src="res.imgUrl"
							@tap="selectBox(2, res.id, index)">
					</view>
				</view>
				<view class="one">
					<view class="two" v-for="(res, index) in boxListThree" :key="index">
						<image :ref="'gitThree' + res.id" class="present" :src="res.imgUrl"
							@tap="selectBox(3, res.id, index)">
					</view>
				</view>
			</view>
		</view>

		<!-- 返回按钮 -->
		<!-- <u-back-top :scroll-top="scrollTop" top="10" :duration="240" :iconStyle="iconStyle" :customStyle="custom">
		</u-back-top>
		<view class="action-content">
			<template v-if="itemList.length != 0">
				<block v-for="(res, index) in itemList" :key="index">
					<view class="action-item" @click="navigateGoods(res.id)">
						<view class="item-style">
							<view class="item-img-style">
								<image class="item-img" :src="res.img"></image>
							</view>
							<view class="item-info">
								<view class="item-name">{{ res.title }}</view>
								<view class="item-status">
									<view class="price">￥{{res.price}}</view>
								</view>
							</view>
							<view class="item-info-two">
								<block v-if="res.status === 1 && res.number != 0">
									<view class="status">{{ res.statusName }}</view>
								</block>
								<block v-else>
									<view class="status-one">{{ res.statusName }}</view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</template>
			<template v-if="hasData">
				<view class="action-sell-out">
					<image class="sell-out" src="/static/images/common/sellout.png" mode="widthFix"></image>
					<view class="sell-out-text">商品全部已售空</view>
				</view>
			</template>
		</view> -->
		<!-- 转盘 -->
		<!-- <LuckyGrid ref="myLucky" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes" :buttons="buttons"
			:defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" /> -->

		<!-- 退出登录弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent @tap="close">
			<u-transition :show="showTips" duration="1000">
				<view class="background">
					<image class="background-img" src="@/static/images/auction/dialog_background.png" mode="widthFix" />
					<view class="tips">{{ tips }}</view>
				</view>

				<!-- <view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<text class="text-tips" :selectable="false">{{ tips }}</text>
						<view class="button-box">
							<view class="button-one" @click="cancel">取消</view>
							<view class="button-two" @click="confirmLoginOut">确定</view>
						</view>
					</view>
				</view> -->
			</u-transition>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		goodsList,
		OrderGrabb
	} from '@/common/api.js';
	export default {
		// 注册组件
		components: {
		},
		data() {
			return {
				/* 背景图片 */
				backgroundUrl: '/static/images/auction/background.png', // 背景图片

				/* 盲盒列表 */
				boxListOne: [{
					id: 0,
					imgUrl: '/static/images/auction/caclose.png',
					status: 0, // 0 - 未开启 | 1 - 已开启
				}, {
					id: 1,
					imgUrl: '/static/images/auction/caclose.png',
					status: 0, // 0 - 未开启 | 1 - 已开启
				}, {
					id: 2,
					imgUrl: '/static/images/auction/caclose.png',
					status: 0, // 0 - 未开启 | 1 - 已开启
				}],
				boxListTwo: [{
					id: 3,
					imgUrl: '/static/images/auction/caclose.png',
					status: 0, // 0 - 未开启 | 1 - 已开启
				}, {
					id: 4,
					imgUrl: '/static/images/auction/caclose.png',
					status: 0, // 0 - 未开启 | 1 - 已开启
				}, {
					id: 5,
					imgUrl: '/static/images/auction/caclose.png',
					status: 0, // 0 - 未开启 | 1 - 已开启
				}],
				boxListThree: [{
					id: 6,
					imgUrl: '/static/images/auction/caclose.png',
					status: 0, // 0 - 未开启 | 1 - 已开启
				}, {
					id: 7,
					imgUrl: '/static/images/auction/caclose.png',
					status: 0, // 0 - 未开启 | 1 - 已开启
				}, {
					id: 8,
					imgUrl: '/static/images/auction/caclose.png',
					status: 0, // 0 - 未开启 | 1 - 已开启
				}],

				/* 弹窗 */
				tips: '', // 弹窗提示
				showTips: false, // 退出登录弹窗状态

				// /* 返回顶部按钮 */
				// scrollTop: 0, // 返回顶部滚动值
				// iconStyle: {
				// 	fontSize: '40rpx',
				// 	fontWeight: '600',
				// 	color: '#FFFFFF'
				// }, // 滚动内层样式
				// custom: {
				// 	background: '#CB8F58'
				// }, // 滚动外层样式

				// /* 数据列表 */
				// pages: 1, // 订单页数
				// total_page: '', // 订单总页数
				// amount: 5, // 订单条数
				// total_amount: '', // 订单总数
				activityID: '', // 活动场次编号
				date: '', // 活动时间
				// itemList: [], // 商品信息
				// goods_name: '', // 搜索商品名称

				// /* 是否有数据 */
				// hasData: false, // 判断当前是否有数据

				/* 抽奖 */
				// blocks: [{
				// 		padding: '10px',
				// 		background: '#FAD1AE'
				// 		// border: '1px solid #EADDBF'
				// 	},
				// 	{
				// 		padding: '10px',
				// 		background: '#e9e8fe'
				// 	}
				// ],
				// prizes: [{
				// 		x: 0,
				// 		y: 0,
				// 		fonts: [{
				// 			text: '0',
				// 			// top: '15px'
				// 		}]
				// 	},
				// 	{
				// 		x: 1,
				// 		y: 0
				// 	},
				// 	{
				// 		x: 2,
				// 		y: 0
				// 	},
				// 	{
				// 		x: 2,
				// 		y: 1
				// 	},
				// 	{
				// 		x: 2,
				// 		y: 2
				// 	},
				// 	{
				// 		x: 1,
				// 		y: 2
				// 	},
				// 	{
				// 		x: 0,
				// 		y: 2
				// 	},
				// 	{
				// 		x: 0,
				// 		y: 1
				// 	},
				// ],
				// buttons: [{
				// 	x: 1,
				// 	y: 1,
				// 	background: 'rgba(0,0,0,0)',
				// 	imgs: [{
				// 		src: '/static/images/common/delete.png',
				// 		width: '100%',
				// 		height: '100%',
				// 	}],
				// }],
				// defaultStyle: {
				// 	background: '#b8c5f2'
				// },

			};
		},
		onLoad(option) {
			/* 活动信息 */
			this.activityID = option.id; // 活动编号
			// this.date = option.time; // 活动场次
			// this.setTitle(option.time); // 设置活动标题
		},
		onShow() {
			/* 活动详情列表 */
			// this.getGoodsList(); // 获取商品信息
		},
		// /* 返回顶部 */
		// onPageScroll(e) {
		// 	this.scrollTop = e.scrollTop;
		// },
		methods: {

			/* 选择盲盒 */
			selectBox(line, id, index) {
				const that = this;
				that.$debounce(that.getMyBox, 1500, true); // 开盒操作
				// that.getMyBox(); // 开盒操作
				for (let i = 0; i < 3; i++) {
					if (that.boxListOne[i].imgUrl == '/static/images/auction/caopen.png') {
						that.boxListOne[i].imgUrl = '/static/images/auction/caclose.png';
					}
					if (that.boxListTwo[i].imgUrl == '/static/images/auction/caopen.png') {
						that.boxListTwo[i].imgUrl = '/static/images/auction/caclose.png';
					}
					if (that.boxListThree[i].imgUrl == '/static/images/auction/caopen.png') {
						that.boxListThree[i].imgUrl = '/static/images/auction/caclose.png';
					}
				}
				if (line === 1) {
					const option = that.$refs[`gitOne${id}`][0]; // 获取操作对象
					Fn.refAddClass(option, "caseopen"); // 添加动画
					setTimeout(() => {
						that.boxListOne[index].imgUrl = '/static/images/auction/caopen.png';
						that.showTips = true;
						Fn.refRemoveClass(that.$refs[`gitOne${id}`], "caseopen"); // 动画结束删除动画
					}, 1000)
				} else if (line === 2) {
					const option = that.$refs[`gitTwo${id}`][0]; // 获取操作对象
					Fn.refAddClass(option, "caseopen"); // 添加动画
					setTimeout(() => {
						that.boxListTwo[index].imgUrl = '/static/images/auction/caopen.png';
						that.showTips = true;
						Fn.refRemoveClass(that.$refs[`gitTwo${id}`], "caseopen"); // 动画结束删除动画
					}, 1000)
				} else {
					const option = that.$refs[`gitThree${id}`][0]; // 获取操作对象
					Fn.refAddClass(option, "caseopen"); // 添加动画
					setTimeout(() => {
						that.boxListThree[index].imgUrl = '/static/images/auction/caopen.png';
						that.showTips = true;
						Fn.refRemoveClass(that.$refs[`gitThree${id}`], "caseopen"); // 动画结束删除动画
					}, 1000)
				}
			},

			/* 关闭弹窗 */
			close() {
				const that = this;
				that.showTips = false;
				Fn.Loading('加载中');
				setTimeout(() => {
					Fn.LoadingOff();
					uni.navigateBack();
				}, 800);
			},

			/* 获取 */
			getMyBox() {
				const that = this;
				const params = {
					catId: that.activityID
				};
				OrderGrabb(params).then((res) => {
					if (res.status === 1) {
						that.tips = res.msg;
					} else if (res.status === -1) {
						that.tips = res.msg;
					}
				});
			},

			// /* 获取商品列表 */
			// getGoodsList() {
			// 	const that = this;
			// 	const params = {
			// 		catId: that.activityID,
			// 	};
			// 	goodsList(params).then((res) => {
			// 		if (res.status === 1) {
			// 			const result = res.data;
			// 			that.total_page = result.last_page;
			// 			that.total_amount = result.total;
			// 			that.itemList = result.map(item => {
			// 				return {
			// 					id: item.id,
			// 					number: item.goodsNum,
			// 					title: item.goodsName,
			// 					img: item.goodsLogo,
			// 					price: Fn.checkDigit({
			// 						number: item.goodsPrice,
			// 						len: 4,
			// 						max: 100000000,
			// 						min: -1
			// 					}) /* item.goodsPrice */ ,
			// 					status: item.onlineStatus,
			// 					statusName: item.status
			// 				};
			// 			});
			// 			if (that.itemList.length === 0) {
			// 				that.hasData = true;
			// 			} else {
			// 				that.hasData = false;
			// 			};
			// 		} else {
			// 			Fn.Toast(res.msg, 3, 1500);
			// 		};
			// 	});
			// },

			// /* 设置活动标题 */
			// setTitle(date) {
			// 	let _title = date;
			// 	uni.setNavigationBarTitle({
			// 		title: _title,
			// 	});
			// },

			/* 跳转至商品详情页面 */
			// navigateGoods(id) {
			// 	uni.navigateTo({
			// 		url: '/pages/index/action/goodsDetail/goodsDetail?id=' + id,
			// 	});
			// },

			// /* 抽奖 */
			// startCallBack() {
			// 	// 先开始旋转
			// 	this.$refs.myLucky.play()
			// 	// 使用定时器模拟接口
			// 	setTimeout(() => {
			// 		// 结束游戏, 并抽第0号奖品
			// 		this.$refs.myLucky.stop(0)
			// 	}, 3000)
			// },
			// // 抽奖结束触发回调
			// endCallBack(prize) {
			// 	// 奖品详情
			// 	console.log(prize)
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F0D2;
	}

	.mask {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 1001;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		// display: none;

		.background {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			margin: -500rpx auto 0 auto;
			text-align: center;

			.background-img {
				width: 90vw;
				height: auto;
			}

			.tips {
				width: 40vw;
				position: absolute;
				left: 0;
				right: 0;
				top: 50%;
				margin: -70rpx auto 0 auto;
				color: #F7934C;
				font-size: 46rpx;
				font-family: PingFang_Bold;
			}
		}

		// .modal-bg-box {
		// 	background-color: #FFFFFF;
		// 	width: 580rpx;
		// 	// height: 390rpx;
		// 	position: absolute;
		// 	left: 50%;
		// 	top: 45%;
		// 	transform: translate(-50%, -50%);

		// 	.title {
		// 		text-align: center;
		// 		margin: 40rpx 0;
		// 		font-size: 42rpx;
		// 		font-weight: 600;
		// 	}

		// 	.inner-box {
		// 		margin: 20rpx 20rpx 40rpx 20rpx;
		// 		text-align: center;

		// 		.text-tips {
		// 			display: block;
		// 			line-height: 70rpx;
		// 			font-size: 36rpx;
		// 			font-family: Alibaba PuHuiTi;
		// 			font-weight: bold;
		// 			color: #89898C;
		// 		}

		// 		.button-box {
		// 			text-align: center;
		// 			margin-top: 50rpx;
		// 			display: flex;
		// 			align-items: center;
		// 			justify-content: center;

		// 			.button-one {
		// 				display: inline-block;
		// 				width: 120rpx;
		// 				height: 58rpx;
		// 				line-height: 58rpx;
		// 				margin: 0 40rpx 0 0;
		// 				text-align: center;
		// 				color: #000000;
		// 				border: 2px solid #000000;
		// 				border-radius: 8rpx;
		// 				font-size: 26rpx;
		// 				font-weight: bold;
		// 				cursor: pointer;
		// 			}

		// 			.button-two {
		// 				background-color: #000000;
		// 				display: inline-block;
		// 				width: 120rpx;
		// 				height: 58rpx;
		// 				line-height: 58rpx;
		// 				margin: 0 0 0 40rpx;
		// 				text-align: center;
		// 				color: #FFFFFF;
		// 				border-radius: 8rpx;
		// 				font-size: 26rpx;
		// 				font-weight: bold;
		// 				cursor: pointer;
		// 			}
		// 		}
		// 	}
		// }
	}

	// 背景图片
	.image-bg {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		// bottom: 0;
		z-index: 0;
	}

	.home-action {
		padding: 15px 18px 30px 18px;

		// .search {
		// 	background-color: #F1F1F1;
		// 	padding: 15rpx 18rpx;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: space-between;

		// 	.left {
		// 		display: flex;
		// 		align-items: center;

		// 		.search-img {
		// 			width: 5vw;
		// 			height: 5vw;
		// 		}

		// 		.input-style {
		// 			width: 55vw;
		// 			margin-left: 30rpx;
		// 			font-size: 26rpx;
		// 			// font-weight: 600;
		// 		}

		// 		.input-placeholder {
		// 			font-size: 26rpx;
		// 		}
		// 	}

		// 	.search-button {
		// 		background-color: #AD4440;
		// 		padding: 10rpx 20rpx;
		// 		color: #FFFFFF;
		// 		font-size: 26rpx;
		// 		border-radius: 3px;
		// 		cursor: pointer;
		// 	}
		// }

		// 盲盒
		.box-content {
			height: 960upx;
			background-image: url('~@/static/images/auction/background_one.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 20rpx;
			right: 20rpx;
			bottom: 200rpx;
			margin: 0 auto;
			// padding: 250rpx 100rpx 0 100rpx;
			box-sizing: border-box;

			.ca-content {
				position: absolute;
				left: 60rpx;
				right: 80rpx;
				top: 50%;
				margin: -290rpx auto 0 auto;
				// width: 100%;
				// margin: 4rem 5% 0;
				// height: 7rem;
				// padding: .2rem .2rem;
				box-sizing: border-box;

				.one {
					// float: left;
					width: 100%;
					margin: 0.35rem 0rem;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.two {
						// float: left;
						// margin: 0;
						width: calc(98%/3);
						text-align: center;
						// height: 1.5rem;

						.present {
							width: 28vw;
							height: 28vw;
						}
					}

					&:nth-of-type(n+2) {
						// margin-top: 20rpx;
					}
				}
			}

			.caseopen {
				animation: mymove 400ms linear 3;
			}

			@keyframes mymove {
				from {
					transform: rotate(-15deg) scale(1.04);
				}

				to {
					transform: rotate(15deg) scale(0.97);
				}
			}

			@-webkit-keyframes mymove {
				from {
					transform: rotate(-15deg) scale(1.04);
				}

				to {
					transform: rotate(15deg) scale(0.97);
				}
			}

			@-moz-keyframes mymove {
				from {
					transform: rotate(-15deg) scale(1.04);
				}

				to {
					transform: rotate(15deg) scale(0.97);
				}
			}

			.ca-prmsg {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.7);
				position: fixed;
				top: 0;
				left: 0;
				z-index: 9;
				display: none;
			}

			.ca-prmsg img {
				width: 80%;
				margin: 0 10%;
			}

			.ca-prmsg .eg-goods {
				position: absolute;
				width: 15%;
				height: 1rem;
				margin: 0;
				top: 4.2rem;
				margin: 0 42.5%;
			}

			.ca-prmsg p {
				position: absolute;
				top: 5.2rem;
				width: 30%;
				text-align: center;
				margin: 0 35%;
				font-size: .2rem;
			}
		}

		// .action-content {
		// 	// margin-top: 28rpx;
		// 	// display: flex;
		// 	// align-items: center;
		// 	// flex-wrap: wrap;
		// 	// justify-content: space-between;

		// 	.action-item {
		// 		width: calc(50% - 30rpx);
		// 		display: inline-block;
		// 		border: 1px solid #E9E9E9;
		// 		// margin: 15rpx;
		// 		// padding: 18rpx;
		// 		box-sizing: border-box;
		// 		cursor: pointer;

		// 		&:nth-of-type(even) {
		// 			margin-left: 30rpx;
		// 		}

		// 		&:nth-of-type(odd) {
		// 			margin-right: 30rpx;
		// 		}

		// 		&:nth-of-type(n+3) {
		// 			margin-top: 30rpx;
		// 		}

		// 		.item-style {

		// 			.item-img-style {
		// 				width: 100%;
		// 				// width: 260rpx;
		// 				height: 290rpx;

		// 				.item-img {
		// 					width: 100%;
		// 					height: 100%;
		// 					box-sizing: border-box;
		// 				}
		// 			}

		// 			.item-info {
		// 				// margin-top: 26rpx;
		// 				padding: 18rpx;

		// 				.item-name {
		// 					font-size: 28rpx;
		// 				}

		// 				.item-status {
		// 					// display: flex;
		// 					// align-items: center;
		// 					// justify-content: space-between;
		// 					margin-top: 10rpx;

		// 					.price {
		// 						font-size: 36rpx;
		// 						font-weight: 600;
		// 					}
		// 				}
		// 			}

		// 			.item-info-two {
		// 				padding: 0 18rpx 18rpx 18rpx;
		// 				// text-align: right;

		// 				.status {
		// 					background-color: #AD4440;
		// 					padding: 8rpx 18rpx;
		// 					color: #FFFFFF;
		// 					font-size: 26rpx;
		// 					font-weight: 600;
		// 					width: 8vw;
		// 					text-align: center;
		// 				}

		// 				.status-one {
		// 					background-color: #beb2b2;
		// 					padding: 8rpx 18rpx;
		// 					// color: #FFFFFF;
		// 					font-size: 22rpx;
		// 					font-weight: 600;
		// 				}
		// 			}
		// 		}
		// 	}

		// 	.action-sell-out {
		// 		margin-top: 100rpx;
		// 		text-align: center;

		// 		.sell-out {
		// 			width: 65vw;
		// 			height: 65vw;
		// 		}

		// 		.sell-out-text {
		// 			margin-top: 40rpx;
		// 			color: #aaaaaa;
		// 			font-size: 34rpx;
		// 			font-weight: 600;
		// 		}
		// 	}
		// }
	}
</style>
